@property --track-fill-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #F9805A;
}

@property --track-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #F9805A;
}

@property --thumb-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #F9805A;
}

.slider {
    --track-fill-color: #F9805A;
    --track-color: #e0e0e0;
    --thumb-color: #F9805A;
}

.slider.disabled {
    --track-fill-color: #ddd;
    --track-color: #ddd;
    --thumb-color: #ddd;
}

.slider input[type=range] {
    appearance: none;
    height: 18px;
    margin: 10px 0;
    background: none;

    cursor: pointer;
}

.slider input[type=range]:disabled {
    cursor: not-allowed;
}

.slider input[type=range]::-webkit-slider-runnable-track {
    appearance: none;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, var(--track-fill-color) 0%, var(--track-fill-color), var(--value, 50%), var(--track-color) var(--value, 50%), var(--track-color) 100%);
    transition-property: --track-fill-color, --track-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    border: none;
}

.slider input[type=range]::-webkit-slider-thumb {
    appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 18px;
    background: var(--thumb-color);
    transition: --thumb-color 0.2s ease-out;
    margin-top: -7px;
}